<script setup lang="ts">
import screenfull from "screenfull";
import zoomInIcon from "@/assets/images/加号.png";
import zoomOutIcon from "@/assets/images/减号.png";
import legendIcon from "@/assets/icons/legend.svg";
import fullScreenIcon from "@/assets/images/fullscreen.svg";
import previewStateIcon from "@/assets/images/previewState.png";
import { useMap } from "@/views/layer/gismap/components/Map/index.vue";
import locationIcon from "@/assets/images/location.png";
import { getLocationInfo } from "@/utils/map";
const emitEvents = defineEmits(["toggleShowLegend"]);
const MAP_URL =
  "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=3131a9355f28fb662853cfa719d3e160&x={x}&y={y}&z={z}";
const SATELLITE_MAP_URL =
  "https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";
const zoomOut = () => {
  const map = useMap();
  map && map.zoomOut();
};
const zoomIn = () => {
  const map = useMap();
  map && map.zoomIn();
};
const onLegend = () => {
  emitEvents("toggleShowLegend");
};
const onFullScreen = () => {
  if (screenfull.isEnabled) {
    const el = document.querySelector(".app-container");
    el && screenfull.toggle(el);
  }
};
const onPreviewState = () => {
  const map = useMap();
  const layers = map._layers;
  Object.values(layers).forEach((layer: any) => {
    if (layer._url.includes("autonavi")) {
      const newUrl = layer._url === MAP_URL ? SATELLITE_MAP_URL : MAP_URL;
      layer.setUrl(newUrl);
    }
  });
};
const onLocation = async () => {
  const locationInfo = await getLocationInfo();
  const map = useMap();
  if (map && locationInfo?.status) {
    const { rectangle, city }: any = locationInfo;
    const coods = rectangle.split(";").map((item) => {
      return item.split(",").map(Number).reverse();
    });
    map.fitBounds(coods);
    ElMessage.warning("您当前的位置在" + city);
  }
};
const items = [
  { name: "放大", icon: zoomInIcon, click: zoomIn },
  { name: "缩小", icon: zoomOutIcon, click: zoomOut },
  { name: "图例", icon: legendIcon, active: false, click: onLegend },
  { name: "全屏", icon: fullScreenIcon, click: onFullScreen },
  { name: "查看状态", icon: previewStateIcon, click: onPreviewState },
  { name: "定位", icon: locationIcon, click: onLocation },
];
</script>

<template>
  <div class="map-tools">
    <div
      v-for="(item, index) in items"
      class="tool"
      @click="item.click"
      :key="index"
      :title="item.name"
    >
      <img :src="item.icon" alt="" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.map-tools {
  position: absolute;
  right: 17px;
  bottom: 150px;
  z-index: 1000;
}

.tool {
  display: flex;
  justify-items: center;
  width: 31px;
  height: 32px;
  padding: 3px;
  margin-bottom: 5px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(16 16 16 / 100%);
  text-align: center;
  cursor: pointer;
  background-color: rgb(255 255 255 / 100%);
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
}
</style>
